<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>种植计划 - 智慧农业信息管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }
        .navbar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .navbar-brand, .navbar-nav .nav-link {
            color: white !important;
        }
        .sidebar {
            position: fixed;
            top: 56px;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 20px 0;
            background: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        .sidebar .nav-link {
            color: #333;
            padding: 12px 20px;
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: #667eea;
            background-color: #f8f9fa;
            border-left-color: #667eea;
        }
        .sidebar .nav-link i {
            width: 20px;
            margin-right: 10px;
        }
        main {
            margin-top: 56px;
            padding-top: 20px;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .btn-primary:hover {
            opacity: 0.9;
        }
        .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .table-wrapper {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/index">
                <i class="fas fa-leaf"></i> 智慧农业信息管理系统
            </a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text text-white me-3">
                    <i class="fas fa-user-circle"></i>
                    欢迎，<span th:text="${session.currentUser.realName}">用户</span>
                </span>
                <a class="nav-link text-white" href="/logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-md-block sidebar">
                <div class="position-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/index">
                                <i class="fas fa-home"></i> 首页
                            </a>
                        </li>
                        <div th:if="${session.currentUser.role == 'admin'}">
                            <li class="nav-item">
                                <a class="nav-link" href="/user/list">
                                    <i class="fas fa-users"></i> 用户管理
                                </a>
                            </li>
                        </div>
                        <div th:if="${session.currentUser.role == 'admin' || session.currentUser.role == 'manager'}">
                            <li class="nav-item">
                                <a class="nav-link" href="/field/list">
                                    <i class="fas fa-map"></i> 地块管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/crop/list">
                                    <i class="fas fa-seedling"></i> 作物管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/material/list">
                                    <i class="fas fa-boxes"></i> 农资管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/plan/list">
                                    <i class="fas fa-calendar-alt"></i> 种植计划
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/farming/list">
                                    <i class="fas fa-tractor"></i> 农事记录
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/monitor/list">
                                    <i class="fas fa-chart-line"></i> 生长监测
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/product/list">
                                    <i class="fas fa-box"></i> 产品管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/sales/list">
                                    <i class="fas fa-shopping-cart"></i> 销售记录
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/statistics/dashboard">
                                    <i class="fas fa-chart-bar"></i> 数据统计
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/news/list">
                                    <i class="fas fa-bullhorn"></i> 新闻公告
                                </a>
                            </li>
                        </div>
                        <li class="nav-item">
                            <a class="nav-link" href="/farm/display">
                                <i class="fas fa-store"></i> 农场展示
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
                    <h1 class="h2"><i class="fas fa-calendar-alt"></i> 种植计划管理</h1>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#planModal" onclick="resetForm()">
                        <i class="fas fa-plus"></i> 新增计划
                    </button>
                </div>

                <div class="table-wrapper">
                    <div th:if="${plans != null and !plans.isEmpty()}">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>计划编号</th>
                                    <th>地块</th>
                                    <th>作物</th>
                                    <th>种植面积</th>
                                    <th>播种日期</th>
                                    <th>预计收获</th>
                                    <th>负责人</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="p : ${plans}">
                                    <td th:text="${p.planCode}">编号</td>
                                    <td th:text="${p.fieldName}">地块</td>
                                    <td th:text="${p.cropName}">作物</td>
                                    <td><span th:text="${p.plantingArea}">0</span> 亩</td>
                                    <td th:text="${#temporals.format(p.plannedSowingDate, 'yyyy-MM-dd')}">日期</td>
                                    <td th:text="${#temporals.format(p.expectedHarvestDate, 'yyyy-MM-dd')}">日期</td>
                                    <td th:text="${p.manager}">负责人</td>
                                    <td>
                                        <span class="badge bg-warning" th:if="${p.status == 'pending'}">计划中</span>
                                        <span class="badge bg-primary" th:if="${p.status == 'executing'}">执行中</span>
                                        <span class="badge bg-success" th:if="${p.status == 'completed'}">已完成</span>
                                        <span class="badge bg-secondary" th:if="${p.status == 'cancelled'}">已取消</span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary me-1" th:onclick="'editPlan(' + ${p.id} + ')'">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" th:onclick="'deletePlan(' + ${p.id} + ')'">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div th:if="${plans == null or plans.isEmpty()}" class="alert alert-info text-center">
                        <i class="fas fa-info-circle fa-2x mb-2"></i>
                        <p>暂无种植计划，请点击"新增计划"按钮添加</p>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 种植计划编辑模态框 -->
    <div class="modal fade" id="planModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-calendar-alt"></i> 种植计划信息
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="planForm">
                        <input type="hidden" id="planId" name="id">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">计划编号 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="planCode" name="planCode" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">地块 <span class="text-danger">*</span></label>
                                <select class="form-select" id="fieldId" name="fieldId" required onchange="updateFieldName()">
                                    <option value="">请选择地块</option>
                                    <option th:each="field : ${fields}" th:value="${field.id}" 
                                            th:text="${field.fieldName + ' (' + field.area + '亩)'}">地块</option>
                                </select>
                                <input type="hidden" id="fieldName" name="fieldName">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">作物 <span class="text-danger">*</span></label>
                                <select class="form-select" id="cropId" name="cropId" required onchange="updateCropName()">
                                    <option value="">请选择作物</option>
                                    <option th:each="crop : ${crops}" th:value="${crop.id}" 
                                            th:text="${crop.cropName + ' (' + crop.variety + ')'}">作物</option>
                                </select>
                                <input type="hidden" id="cropName" name="cropName">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">种植面积（亩） <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="plantingArea" name="plantingArea" step="0.1" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">计划播种日期 <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="plannedSowingDate" name="plannedSowingDate" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">预计收获日期 <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="expectedHarvestDate" name="expectedHarvestDate" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">预计产量（斤）</label>
                                <input type="number" class="form-control" id="expectedYield" name="expectedYield" step="0.1">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">负责人 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="manager" name="manager" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">状态</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="pending">计划中</option>
                                    <option value="executing">执行中</option>
                                    <option value="completed">已完成</option>
                                    <option value="cancelled">已取消</option>
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">备注</label>
                                <textarea class="form-control" id="remark" name="remark" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="savePlan()">
                        <i class="fas fa-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        const fields = /*[[${fields}]]*/ [];
        const crops = /*[[${crops}]]*/ [];
        const currentUser = /*[[${session.currentUser}]]*/ {};

        function resetForm() {
            $('#planForm')[0].reset();
            $('#planId').val('');
            $('#manager').val(currentUser.realName);
            $('#status').val('pending');
        }

        function updateFieldName() {
            const fieldId = $('#fieldId').val();
            const field = fields.find(f => f.id == fieldId);
            if (field) {
                $('#fieldName').val(field.fieldName);
            }
        }

        function updateCropName() {
            const cropId = $('#cropId').val();
            const crop = crops.find(c => c.id == cropId);
            if (crop) {
                $('#cropName').val(crop.cropName);
            }
        }

        function savePlan() {
            const formData = {
                id: $('#planId').val() || null,
                planCode: $('#planCode').val(),
                fieldId: parseInt($('#fieldId').val()),
                fieldName: $('#fieldName').val(),
                cropId: parseInt($('#cropId').val()),
                cropName: $('#cropName').val(),
                plantingArea: parseFloat($('#plantingArea').val()),
                plannedSowingDate: $('#plannedSowingDate').val(),
                expectedHarvestDate: $('#expectedHarvestDate').val(),
                expectedYield: $('#expectedYield').val() ? parseFloat($('#expectedYield').val()) : null,
                manager: $('#manager').val(),
                status: $('#status').val(),
                remark: $('#remark').val()
            };

            $.ajax({
                url: '/plan/save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    if (res.code === 200) {
                        alert('保存成功！');
                        location.reload();
                    } else {
                        alert('保存失败: ' + res.message);
                    }
                },
                error: function() {
                    alert('保存失败，请重试');
                }
            });
        }

        function editPlan(id) {
            $.get('/plan/detail/' + id, function(res) {
                if (res.code === 200) {
                    const p = res.data;
                    $('#planId').val(p.id);
                    $('#planCode').val(p.planCode);
                    $('#fieldId').val(p.fieldId);
                    $('#fieldName').val(p.fieldName);
                    $('#cropId').val(p.cropId);
                    $('#cropName').val(p.cropName);
                    $('#plantingArea').val(p.plantingArea);
                    $('#plannedSowingDate').val(p.plannedSowingDate);
                    $('#expectedHarvestDate').val(p.expectedHarvestDate);
                    $('#expectedYield').val(p.expectedYield);
                    $('#manager').val(p.manager);
                    $('#status').val(p.status);
                    $('#remark').val(p.remark);
                    $('#planModal').modal('show');
                } else {
                    alert('获取计划信息失败');
                }
            });
        }

        function deletePlan(id) {
            if (confirm('确定要删除这个种植计划吗？')) {
                $.ajax({
                    url: '/plan/delete/' + id,
                    type: 'POST',
                    success: function(res) {
                        if (res.code === 200) {
                            alert('删除成功！');
                            location.reload();
                        } else {
                            alert('删除失败: ' + res.message);
                        }
                    },
                    error: function() {
                        alert('删除失败，请重试');
                    }
                });
            }
        }
    </script>
</body>
</html>
